<template>
	<view class="" style="padding-top: 30rpx;">
		<view class="label">
			<view class="label_text">输入手机号</view>
			<input type="text" v-model="mobile" @input='inputChange' placeholder="请输入手机号" maxlength="11"
				placeholder-class="phone" />
		</view>
		<view class="label">
			<view class="label_text">输入密码</view>
			<input type="password" v-model="password" @input='inputChange' placeholder="请输入密码" maxlength="11"
				placeholder-class="password" />
		</view>
		<view class="label">
			<view class="label_text">输入验证码</view>
			<view class="flex-between label_codes">
				<input type="text" placeholder="请输入验证码" v-model="captcha" @input='inputChange'
					placeholder-class="password">
				<view class="label_code" :class="istip?'istipcol':''" @click="getCode()">
					{{tip}}
				</view>
			</view>
		</view>
		<view :class="logining?'isbtn istext':'istext'" @click="logining?toLogin():''">
			提交并登录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: "",
				password: "",
				captcha: '',
				istip: false,
				tip: '获取验证码',
				logining: false
			}
		},
		methods: {
			inputChange(e) {
				const {
					mobile,
					password,
					captcha
				} = this;
				if (mobile !== '' && password !== '' && captcha !== '') {
					this.logining = true
				} else {
					this.logining = false
				}
			},
			sendCode() {
				if (this.tip == '获取验证码') {
					this.tip = 60;
					this.istip = true
					this.timer = setInterval(() => {
						if (this.tip <= 0) {
							this.tip = '获取验证码'
							this.istip = false
							clearInterval(this.timer)
							this.timer = null
						} else {
							this.tip -= 1
						}
					}, 1000)
				}
			},
			async getCode() {

				const {
					mobile,
					event
				} = this;

				const sendData = {
					mobile,
					event
				};

				if (!mobile) {
					this.$fun.msg('请输入手机号');
					return
				}
				this.$fun.msg('发送成功');
				this.sendCode();
				// const code = await this.$fun.ajax.post('sms/send',sendData);
				// if (code.code === 1) {
				// 	this.$fun.msg('发送成功');
				// } else {
				// 	this.$fun.msg(code.data.msg ? code.data.msg : '发送失败');
				// }
			},
		}
	}
</script>

<style lang="scss">
	.label {
		width: 690rpx;
		box-sizing: border-box;
		margin: 0 auto 0;

		&_text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			margin-top: 30rpx;
		}

		input {
			width: 690rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
		}

		&_codes {
			width: 690rpx;
			font-weight: 500;
			font-size: 28rpx;
			height: 80rpx;
			background: #FFFFFF;
			line-height: 80rpx;
			font-style: normal;
			margin-right: 30rpx;
			border-radius: 24rpx;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;

			input {
				width: 480rpx;
				border-radius: 24rpx;
				margin-top: 0rpx;
				margin-bottom: 0rpx;
			}

			.label_code {
				color: #9999FF;
			}
		}

		.istipcol {
			color: #999999;
		}

		.phone,
		.password {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #CCCCCC;
			text-align: left;
			font-style: normal;
		}
	}

	.istext {
		width: 690rpx;
		height: 88rpx;
		background: $uni-bg-color-btn;
		border-radius: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #CCCCCC;
		line-height: 88rpx;
		text-align: left;
		font-style: normal;
		text-align: center;
		margin: 90rpx auto 0;
	}

	.isbtn {
		background: $uni-color-primary;
		color: #FFFFFF;
	}
</style>